<template>
  <div class="main-info" v-Info>
    <div class="song-info">
      <div class="cover-img">
        <img
          :src="
            host +
            currentData.cur.music_cover_src +
            currentData.cur.music_cover_name
          "
          alt
        />
      </div>
      <div class="meta_info">
        <p class="song-name">{{ currentData.cur.music_name }}</p>
        <p class="song-actor">
          <span>
            <a>{{ currentData.cur.singer_name }}</a></span
          >
          <!-- <span v-for="(item, index) in currentData.cur.ar" :key="index">
            <a>{{ item.name }}</a>
            {{ index + 1 >= currentData.cur.ar.length ? "" : " / " }}
          </span> -->
        </p>
      </div>
    </div>
    <div class="lyric-container" @scroll.prevent>
      <div class="song-info-lyric">
        <div class="lyric-inner" style="transform: translateY(315px)">
          <template v-if="currentData.lyric[0] !== 'noLyric'">
            <p v-for="(item, index) in currentData.lyric" :key="index">
              {{ item.str }}
              <br />
              {{ item.tstr }}
            </p>
          </template>
          <p v-else>纯音乐</p>
        </div>
      </div>
    </div>
    <div class="play-list">
      <ul class="song_list_box">
        <li
          v-for="(item, index) of y_playlist.songlist"
          :key="index"
          :class="currentData.index === index ? 'current' : ''"
        >
          <div class="song-index">{{ index + 1 }}</div>
          <div class="song-wave"></div>
          <div title="播放" class="song-play-action" @click="playById(index)">
            <i class="iconfont icon-bofangsanjiao-white sanjiao"></i>
          </div>
          <div class="song-name">{{ item.music_name }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import utils from "@/libs/utils";
import Info from "./directives/Info";
import { reactive, toRefs } from "vue";
import { host } from "@/configs/config";
export default {
  name: "mainInfo",
  directives: {
    Info,
  },
  props: {
    currentData: Object,
    y_playlist: Object,
  },
  emits: ["playById"],
  setup(props, { emit }) {
    const state = reactive({
      imgParam: "?param=200y200",
    });
    // 单选列表 间隔1秒 防止频繁点击
    const playById = utils.debounce((index) => {
      emit("playById", {
        index: index,
      });
    }, 1000);

    return {
      ...toRefs(state),
      playById,
      host,
    };
  },
};
</script>

<style lang='scss' >
.main-info {
  height: 100%;
  position: relative;
  min-width: 1170px;
  box-sizing: border-box;
  border-bottom: 210px solid transparent;

  .song-info {
    position: absolute;
    left: 160px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    height: 280px;
    text-align: center;

    .cover-img {
      img {
        width: 190px;
        height: 190px;
      }
    }
    .meta_info {
      font-size: 16px;
      p {
        margin-top: 15px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #3a3a3e;
      }
    }
  }
  .lyric-container {
    margin: 0 535px 0 465px;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    -webkit-mask-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0, hsla(0, 0%, 100%, 0)),
      color-stop(15%, hsla(0, 0%, 100%, 0.6)),
      color-stop(25%, #fff),
      color-stop(75%, #fff),
      color-stop(85%, hsla(0, 0%, 100%, 0.6)),
      to(hsla(0, 0%, 100%, 0))
    );
    -webkit-mask-image: linear-gradient(
      180deg,
      hsla(0, 0%, 100%, 0) 0,
      hsla(0, 0%, 100%, 0.6) 15%,
      #fff 25%,
      #fff 75%,
      hsla(0, 0%, 100%, 0.6) 85%,
      hsla(0, 0%, 100%, 0)
    );

    .song-info-lyric {
      height: 90%;
      margin-top: 5%;

      .lyric-inner {
        height: auto;
        transition: transform 0.1s ease-in-out;
        cursor: url("../../../assets/images/Player/cursor.png"), default;

        p {
          font-size: 22px;
          //   line-height: 55px;
          margin-top: 25px;

          &.active {
            color: $ThemeColor !important;
          }
        }
      }
    }
  }
  .play-list {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    width: 310px;
    height: 290px;
    overflow-y: auto;

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 7px;
      height: 7px;
      background-color: transparent;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: transparent;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: #9fa5a8;
    }

    .song_list_box {
      li {
        color: rgba(51, 51, 51, 0.7);
        line-height: 50px;

        &.current {
          .song-index {
            display: none;
          }
          .song-wave {
            display: block;
          }
        }
        .song-index {
          float: left;
          width: 50px;
        }
        .song-wave {
          display: none;
          float: left;
          width: 20px;
          height: 48px;
          background: url("../../../assets/images/Player/playerCurBcBlack.gif");
        }
        .song-play-action {
          float: left;
          width: 20px;
          height: 48px;
          display: none;
          cursor: pointer;

          .sanjiao {
            color: #3a3a3e;
            &:hover {
              color: $ThemeColor;
            }
          }
        }
        .song-name {
          margin-left: 50px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: default;
        }

        &:hover {
          color: #3a3a3e;
          .song-index {
            display: none;
          }
          .song-play-action {
            display: block;
          }
        }
      }
    }
  }
}
</style>
